import React, { Component } from 'react'
import Child from './Child'

// 存在期
// 修改state 
// shouldComponentUpdate  (使用比较多, 可以做一些优化)
// componentWillUpdate  (将要废弃)
// render
// componentDidUpdate  (组件更新完毕)

// 修改props
// componentWillReceiveProps (将要废弃)
// shouldComponentUpdate  (使用比较多, 可以做一些优化)
// componentWillUpdate  (将要废弃)
// render
// componentDidUpdate  (组件更新完毕)


export default class Life2 extends Component {
    state = {
        count: 100,
        flag: true
    }
    add = () => {
        this.setState({
            count: this.state.count += 1
        })
    }
    isShow = () => {
        this.setState({
            flag:!this.state.flag
        })
    }
    // 组件应该更新嘛？
    // shouldComponentUpdate  必须要return 一个布尔值
    shouldComponentUpdate(props, state) {
        // console.log(props, state)
        // 如果返回true  会继续往下执行
        // 如果返回false  不会继续往下执行
        // console.log('我是存在期的第一个生命周期')
        return true
    }
    // 组件将要更新
    // componentWillUpdate() {
    //     // console.log('我是存在期的第二个生命周期--componentWillUpdate')
    // }
    render() {
        const { count, flag } = this.state
        console.log('我是父组件的render')
        return (
            <div>
                {/* 修改state值，或者是修改props的值触发存在期间 */}
                <h3>存在期</h3>
                <div>
                    { count }
                </div>
                <button onClick={() => {
                    this.add()
                }}>++++</button>
                <button onClick={() => {
                    this.isShow()
                }}>点我销毁子组件</button>

                { flag? <Child/>: '' }
                {/* <Child count = { count }/> */}
            </div>
        )
    }
    // 组件更新完毕
    componentDidUpdate() {
        // console.log('我是存在期的第四个生命周期--componentDidUpdate')
    }
}
